<template>
  <div>
    <div class="mt20">
      <dc-cell title="收入分布情况"></dc-cell>
      <div class="common-chart" id="incomeTrend"></div>
      <dc-row class="echarts-list-header" type="flex" justify="space-around">
        <dc-col class="text-left" span="6">收入类目</dc-col>
        <dc-col class="" span="6">金额(元)</dc-col>
        <dc-col class="" span="6">占比</dc-col>
      </dc-row>
      <dc-row class="echarts-list-data bg-white" type="flex" justify="space-around" v-for="(item,index) in incomeList"
              :key="item.accountCode">
        <dc-col class="text-left ellipsis" span="6">
          <span class="point" :style="{background: colors[index]}"></span>
          {{item.accountName}}
        </dc-col>
        <dc-col class="" span="6">{{item.accountNum}}</dc-col>
        <dc-col class="" span="6">{{item.accountPercent}}%</dc-col>
      </dc-row>
    </div>
    <div class="mt20">
      <dc-cell title="支出分布情况" class="main-title"></dc-cell>
      <div class="common-chart" id="outCome"></div>
      <dc-row class="echarts-list-header" type="flex" justify="space-around">
        <dc-col class="text-left ellipsis" span="6">支付类目</dc-col>
        <dc-col class="" span="6">金额(元)</dc-col>
        <dc-col class="" span="6">占营收比例</dc-col>
      </dc-row>
      <dc-row class="echarts-list-data bg-white" type="flex" justify="space-around" v-for="(pay,index) in expenseList" :key="pay.accountCode">
        <dc-col class="text-left" span="6">
          <span class="point" :style="{background: colors[index]}"></span>
          {{pay.accountName}}
        </dc-col>
        <dc-col class="" span="6">{{pay.accountNum}}</dc-col>
        <dc-col class="" span="6">{{pay.accountPercent}}%</dc-col>
      </dc-row>
    </div>
  </div>
</template>
<script>
  import {initPie} from '@/common/echarts/pie';
  import cell from '@/components/cell';
  import {col, row} from '@/components/Flex';
  import api from '@/common/api/financial';
  import store from '@/store/shopAlter';
  import colors from '@/common/echarts/theme.json';
  export default {
    props: {
      timeFlag: [String, Number],
      beginTime: Number,
      endTime: Number
    },
    components: {
      'dc-cell': cell,
      'dc-col': col,
      'dc-row': row
    },
    data () {
      return {
        incomeList: [],
        expenseList: [],
        saleData: [{value: 0, name: '暂无', tip: 0}],
        payData: [{value: 0, name: '暂无', tip: 0}],
        ring: null,
        ring2: null,
        colors: colors.color
      };
    },
    watch: {
      beginTime () {
        this.buildCharts();
      }
    },
    methods: {
      buildCharts () {
        let data = {
          groupCode: store.state.shopAlter.store.groupCode,
          timeFlag: this.timeFlag,
          beginTime: this.beginTime,
          endTime: this.endTime
        };
        this._sysInList(data);
        this._sysOutList(data);
      },
      _sysInList (data) {
        let data2 = {
          beginTime: data.beginTime,
          endTime: data.endTime,
          groupCode: data.groupCode,
          timeFlag: 3,
          accountFlag: 1
        };
        api.getFinList(data2).then(res => {
          if (res.length > 0) {
            this.incomeList = res;
            this.payData = this.chartsData(this.incomeList);
            this.initPayPie();
          }
        });
      },
      _sysOutList (data) {
        data.accountFlag = 2;
        api.getFinList(data).then(res => {
          if (res.length > 0) {
            this.expenseList = res;
            this.saleData = this.chartsData(this.expenseList);
            this.initSalePie();
          }
        });
      },
      chartsData (chartList) {
        let series = [];
        for (let i = 0; i < chartList.length; i++) {
          let obj = {};
          obj.value = chartList[i].accountPercent;
          obj.name = chartList[i].accountName;
          obj.tip = chartList[i].accountNum;
          series.push(obj);
        }
        return series;
      },
      //收入
      initPayPie () {
        let midData = {text: '暂无数据', per: '0'};
        midData.text = this.payData[0].name;
        midData.per = this.payData[0].value;
        this.ring.hideLoading();
        this.ring.setOption({
          title: [{
            text: midData.text,
            textStyle: {
              width: 4,
              verticalAlign: 'top',
              color: '#999',
              fontWeight: 'normal',
              fontSize: 14
            },
            x: 'center',
            y: '50%'
          }, {
            text: midData.per + '%',
            textStyle: {
              verticalAlign: 'top',
              color: '#333',
              fontWeight: 'bold',
              fontSize: 20
            },
            x: 'center',
            y: '42%'
          }],
          tooltip: {
            formatter: function (params) {
              return params.name + ': ' + params.data.tip + '(' + params.value + '%)';
            }
          },
          series: [{
            // 根据名字对应到相应的系列
            name: '',
            radius: ['40%', '55%'],
            data: this.payData
          }]
        });
      },
      //支出
      initSalePie () {
        let midData = {text: '暂无数据', per: '0'};
        midData.text = this.saleData[0].name;
        midData.per = this.saleData[0].value;
        this.ring2.hideLoading();
        this.ring2.setOption({
          title: [{
            text: midData.text,
            textStyle: {
              width: 4,
              verticalAlign: 'top',
              color: '#999',
              fontWeight: 'normal',
              fontSize: 14
            },
            x: 'center',
            y: '50%'
          }, {
            text: midData.per + '%',
            textStyle: {
              verticalAlign: 'top',
              color: '#333',
              fontWeight: 'bold',
              fontSize: 20
            },
            x: 'center',
            y: '44%'
          }],
          tooltip: {
            formatter: function (params) {
              return params.name + ': ' + params.data.tip + '(' + params.value + '%)';
            }
          },
          series: [{
            // 根据名字对应到相应的系列
            name: '',
            radius: ['32%', '44%'],
            data: this.saleData
          }]
        });
      }
    },
    mounted () {
      this.ring = initPie('#incomeTrend');
      this.initPayPie();
      this.ring2 = initPie('#outCome');
      this.initSalePie();
    },
    activated () {
      this.buildCharts();
    },
    created () {
      this.buildCharts();
    }
  };
</script>
<style lang="scss" scoped>
  #outCome {
    height: 400px;
  }
</style>
